<template>
    <div>
        <div class="topImg" data-aos="fade"  data-aos-duration="1000">
            <img :src="image" alt="">
            <span>富贵泉服务</span>
        </div>
        <div class="page_content">
            <div class="title">
                <span>一键呼叫，好服务就在你身边 </span>
                <span>富贵泉服务一站式电动车养护平台，为车主提供全面的用车养车服务</span>
                <span>打造超越期待的服务体验</span>
            </div>
            <div class="main"  >
                <div class="intro" v-for="(item,index) in list" :key="index" >
                    <div class="left"  v-if="index == 0">
                        <div class="entry"><span class="red"> 更多</span> 服务渠道</div>
                        <div class="name"><span class="red">区域服务网点</span>，便捷服务</div>
                        <div class="more">
                            <div @click="goShow('/show', item.id, 5)">了解更多</div>
                        </div>
                    </div>
                    <div class="left" v-if="index == 1">
                        <div class="entry"><span class="red"> 更快 </span> 服务响应</div>
                        <div class="name"><span class="red">护航有道</span>，守护美好出行</div>
                        <div class="more">
                            <div @click="goShow('/show', item.id, 5)">了解更多</div>
                        </div>
                    </div>
                    <div class="left" v-if="index == 2">
                        <div class="entry"><span class="red"> 更好 </span> 服务体验</div>
                        <div class="name"><span class="red">认证工程师坐镇</span>，服务更贴心</div>
                        <div class="more">
                            <div @click="goShow('/show', item.id, 5)">了解更多</div>
                        </div>
                    </div>
                    <div class="conImg">
                        <img :src="list[index].image" alt="">
                    </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            image :'',
            
            list: [],
        }
    },
    mounted() {
        this.getList()
        this.getImage()
    },
    methods: {
        // 进入详情板块
        goShow(url,id,op) {
            if (url) {
                this.$router.push({
                        path: url,
                        query: {
                            id,op
                        }
                    })
                this.$emit('close')
            }
        },
        getList(){
            this.$api.getSupport().then(res => {
                if (res.code == 1) {
                    this.list = res.data
                }
            })
        },
        getImage(){
            this.$api.getBanner({
                slide_id:2,
                limit:1
            }).then(res => {
                if (res.code == 1) {
                    this.image = res.data.image
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.topImg {
    position: relative;
    font-size: 0;

    img {
        width: 100%;
        height: auto;
    }

    span {
        position: absolute;
        bottom: calc(50% - 50px);
        left: 190px;
        height: 100px;
        font-family: MiSans;
        font-weight: bold;
        font-size: 81px;
        color: #FFFFFF;
    }
}

.page_content {
    padding: 173px 347px 60px 316px;

    .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: MiSans;
font-weight: 500;
font-size: 26px;
color: #010000;
line-height: 42px;
    }

    .main {
        margin-top: 170px;

        .intro {
            margin-bottom: 115px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                div{
                    text-align: center;
                }
                .red {
                    color: #AD0D0D;
                }

                .entry {
                    font-family: MiSans;
font-weight: 500;
font-size: 49px;
color: #AD0D0D;
line-height: 80px;
                }

                .name {
                    margin-top: 10px;
                    font-family: MiSans;
font-weight: 500;
font-size: 29px;
line-height: 46px;
                }

                .more {
                    cursor: pointer;
                    margin-top: 20px;
                    width: 100%;
                    height: 71px;
                    display: flex;
                        justify-content: center;
                        align-items: center;
                    div{
                        width: 140px;
                        height: 48px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #010000;
                        font-size: 20px;
                    }
                }
            }

            .conImg {
                width: 691px;
                height: 461px;
                img{
                    width: 691px;
                    height: 461px;
                }
            }
        }
    }
}
@media screen and (max-width:768px) {
    .page_content {
        padding: 10px 30px;
        .title{
        font-size: 14px;
        span{
            text-align: center;
            line-height: 20px;
        }
    }
    }
    .page_content .main .intro {
        .conImg{
                flex: 1;
                text-align: right;
            }
        .left {
           width: 50%;
           text-align: center;
        .entry{
        font-size: 14px;
        line-height: normal;
    }
    .name{
        font-size: 12px;
        line-height: normal;
    }
    .more{
        margin-top: 10px;
        div{
            width: 100px;
            height: 20px;
            font-size: 10px;
        }
    }
    }
    }
}
</style>